<template>
    <div>
        <Header />
        <el-container class="container">
            <el-aside width="200px" class="mt30">
                <el-menu >
                    <el-menu-item v-for="item in lData" :index="item.id" class="line-clamp1">
                        <el-text @click="router.push({ name: 'postsShow', params: { id: item.id } })" type="danger">🔥{{item.title}}</el-text>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main class="main">
                <div class=" text-center">
                    <el-card shadow="always">
                        <!-- <el-image style="width: auto;height: 240px;" :src="data.cover" fit="contain" /> -->
                        <h1 class="course-title mt30">{{data.title}}</h1>
                        <p class="data-content" v-html="data.content"></p>
                    </el-card>
                </div>
            </el-main>
            <el-aside width="200px" class="mt30">
                <el-menu >
                    <el-menu-item v-for="item in rData" :index="item.id">
                        <el-text @click="router.push({ name: 'postsShow', params: { id: item.id } })">{{item.title}}</el-text>
                    </el-menu-item>
                </el-menu>
            </el-aside>
        </el-container>
        <Footer />
    </div>
</template>

<script setup lang="ts">
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
import http from '../../util/request';
import func from '../../util/function';
import router from '../../router';
const id: any = ref(useRouter().currentRoute.value.params.id);
const data = ref<any>({})
const lData = ref<any>([]);
const rData = ref<any>([]);

const onGetData = () => {
    http.get('/posts/'+id.value).then((response:any)=>{
        response.data.data.content = func.onImgStyle( response.data.data.content)
        data.value = response.data.data
    })
}

const onLData = () => {
    http.post('/posts',{tag:'热门',pageSize:8}).then((response:any)=>{
        lData.value = response.data.data
    })
}

const onRData = () => {
    http.post('/posts',{tag:'优选',pageSize:8}).then((response:any)=>{
        rData.value = response.data.data
    })
}


onMounted(()=>{
    onGetData()
    onLData()
    onRData()
})
</script>

<style scoped lang="scss">
.container{width: 1280px;margin: 0px auto;}
.el-menu{border: none !important;}
.frontend-infos{width: 800px;}
.main {
    padding: 0px;
}
.tip {
    padding: 0px 15px;
}

.infos {
    width: 1280px;
    margin: 0px auto;
    padding: 60px 30px;
}

.course-title{height: 120px;}
.price{margin-top: 60px;}
</style>
